<template>
  <el-dialog
    top="1vh"
    :close-on-click-modal="false"
    append-to-body
    title="编辑客户信息记录"
    :visible.sync="dialogVisible"
    width="80%"
    @closed="handleClose"
    v-loading="loading">

    <div style="max-height: 600px;overflow-x: hidden; margin-right: -20px">
      <div style="padding-right: 20px">
        <a-form ref="form" :data="data" :definition="definition" :span="6">

          <!-- 房产信息 -->
          <template v-slot:house>
            <div v-for="(item,index) in house">
              <a-form :key="index" :data="item" :definition="houseDefinition" :span="6">
                <template v-slot:delete>
                  <el-button
                    style="width: 100px"
                    type="primary"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    @click="house.splice(index,1)"/>
                </template>
              </a-form>
            </div>

          </template>

          <!-- 车产信息 -->
          <template v-slot:car>
            <div v-for="(item,index) in car">
              <a-form :key="index" :data="item" :definition="carDefinition" :span="5">
                <template v-slot:delete>
                  <el-button
                    style="width: 100px"
                    type="primary"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    @click="car.splice(index,1)"/>

                </template>
              </a-form>
            </div>

          </template>

          <!-- 保险信息 -->
          <template v-slot:insurance>
            <div v-for="(item,index) in insurance">
              <a-form :key="index" :data="item" :definition="insuranceDefinition" :span="5">
                <template v-slot:delete>
                  <el-button
                    style="width: 100px"
                    type="primary"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    @click="insurance.splice(index,1)"/>
                </template>
              </a-form>
            </div>

          </template>


        </a-form>

      </div>
    </div>


    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel" v-loading="loading">关 闭</el-button>
      <!--      <el-button type="primary" @click="submit" v-loading="loading">确 定</el-button>-->
    </span>

  </el-dialog>
</template>

<script>
import ATable from "@/components/FlyElement/aTable.vue";

export default {
  name: "snapshot",
  components: {ATable},
  data() {
    return {
      loading: false,
      dialogVisible: false,
      data: {},
      definition: [
        {
          type: 'divider',
          label: '基本信息',
          span: 24
        },
        {
          prop: 'phoneNumber',
          label: '手机号码',
          readonly: true
        },
        {
          prop: 'name',
          label: '姓名',
          readonly: true
        },
        {
          label: "",
          span: 12,
          type: 'slot'
        },
        {
          prop: "sex",
          label: "性别",
          type: 'radio',
          option: [
            {key: 0, label: '男'},
            {key: 1, label: '女'}
          ],
          disabled: true
        },
        {
          prop: 'age',
          label: '年龄',
          readonly: true
        },
        {
          prop: 'city',
          label: '申请城市',
          readonly: true
        },
        {
          prop: 'maritalStatus',
          label: '婚姻',
          type: 'radio',
          option: [
            {key: 1, label: '已婚'},
            {key: 0, label: '未婚'}
          ],
          disabled: true
        },
        {
          prop: 'birthday',
          label: '生日',
          type: 'datePicker',
          readonly: true
        },
        {
          prop: 'spouseSpouse',
          label: '配偶生日',
          type: 'datePicker',
          readonly: true
        },
        {
          prop: 'weddingAnniversary',
          label: '结婚纪念日',
          type: 'datePicker',
          readonly: true
        },
        {
          label: "",
          span: 6,
          type: 'slot'
        },
        {
          prop: 'idCard',
          label: '身份证',
          readonly: true
        },
        {
          prop: 'spouseIdCard',
          label: '配偶身份证',
          readonly: true
        },
        {
          prop: 'level',
          label: '客户星级',
          type: 'select',
          dict: 'customer_level',
          disabled: true
        },
        {
          prop: 'status',
          label: '客户状态',
          type: 'select',
          dict: 'customer_status',
          disabled: true
        },
        {
          prop: 'remark',
          label: '备注',
          itemType: 'textarea',
          span: 12,
          readonly: true
        },
        {
          prop: 'expense',
          label: '费用',
          itemType: 'textarea',
          span: 12,
          readonly: () => this.formType === 3 || this.formType === 4,
          hasPer: ['expense']
        },
        {
          type: 'divider',
          label: '需求信息',
          span: 24
        },
        {
          prop: 'amount',
          label: '金额(万)',
          itemType: 'number',
          readonly: true
        },
        {
          prop: 'loanUse',
          label: '贷款用途',
          readonly: true
        },
        {
          prop: 'loanRemark',
          label: "备注",
          span: 12,
          readonly: true
        },
        {
          prop: 'timeLimit',
          label: '期数',
          itemType: 'number',
          min: 1,
          step: 1,
          readonly: true
        },
        {
          prop: 'serviceTime',
          label: '用款时间',
          type: 'datePicker',
          readonly: true
        },
        {
          prop: 'lendingInstitution',
          label: '放款机构',
          readonly: true
        },
        {
          label: "",
          span: 6,
          type: 'slot'
        },
        {
          prop: 'repaymentType',
          label: '还款方式',
          type: 'radio',
          option: [
            {key: 1, label: '月'},
            {key: 2, label: '季度'}
          ],
          disabled: true
        },
        {
          prop: 'repaymentMonth',
          label: '还款月',
          type: 'select',
          if: () => this.data.repaymentType === 2,
          option: [
            {key: 1, label: '第一月'},
            {key: 2, label: '第二月'},
            {key: 3, label: '第三月'}
          ],
          disabled: true
        },
        {
          prop: 'repaymentDay',
          label: '还款日',
          type: 'select',
          option: [
            {key: 1, label: '第1日'},
            {key: 2, label: '第2日'},
            {key: 3, label: '第3日'},
            {key: 4, label: '第4日'},
            {key: 5, label: '第5日'},
            {key: 6, label: '第6日'},
            {key: 7, label: '第7日'},
            {key: 8, label: '第8日'},
            {key: 9, label: '第9日'},
            {key: 10, label: '第10日'},
            {key: 11, label: '第11日'},
            {key: 12, label: '第12日'},
            {key: 13, label: '第13日'},
            {key: 14, label: '第14日'},
            {key: 15, label: '第15日'},
            {key: 16, label: '第16日'},
            {key: 17, label: '第17日'},
            {key: 18, label: '第18日'},
            {key: 19, label: '第19日'},
            {key: 20, label: '第20日'},
            {key: 21, label: '第21日'},
            {key: 22, label: '第22日'},
            {key: 23, label: '第23日'},
            {key: 24, label: '第24日'},
            {key: 25, label: '第25日'},
            {key: 26, label: '第26日'},
            {key: 27, label: '第27日'},
            {key: 28, label: '第28日'},
            {key: 29, label: '第29日'},
            {key: 30, label: '第30日'},
            {key: 31, label: '第31日'}
          ],
          disabled: true
        },
        {
          prop: 'repaymentAmount',
          label: '还款金额',
          itemType: 'number',
          readonly: true
        },
        {
          prop: 'deadline',
          label: '截止日期',
          type: 'datePicker',
          placeholder: '配置自动生成',
          disabled: true,
          readonly: true
        },
        {
          prop: 'needTable',
          labelWidth: '0px',
          label: '',
          span: 24,
          type: 'slot',
          if: () => this.id !== undefined && this.id !== null && this.id !== ''
        },
        {
          type: 'divider',
          label: '身份信息',
          span: 24
        },
        {
          prop: 'occupation',
          label: '职位',
          type: 'radio',
          dict: 'customer_occupation',
          span: 24,
          disabled: true
        },
        {
          prop: 'occupationRemark',
          label: '职位备注',
          itemType: 'textarea',
          span: 12,
          readonly: true
        },
        {
          type: 'divider',
          label: '房产信息',
          span: 24
        },
        {
          labelWidth: '60px',
          label: '',
          prop: 'house',
          type: 'slot',
          span: 24
        },
        {
          type: 'divider',
          label: '车产信息',
          span: 24
        },
        {
          labelWidth: '60px',
          label: '',
          prop: 'car',
          type: 'slot',
          span: 24
        },
        {
          type: 'divider',
          label: '保单信息',
          span: 24
        },
        {
          labelWidth: '60px',
          label: '',
          prop: 'insurance',
          type: 'slot',
          span: 24
        }
      ],
      // 房产
      houseDefinition: [
        {
          labelWidth: '60px',
          prop: 'cellName',
          label: '小区名',
          readonly: true
        },
        {
          labelWidth: '60px',
          prop: 'area',
          label: '面积',
          readonly: true
        },
        {
          labelWidth: '120px',
          prop: 'price',
          label: '预估现价(万)',
          readonly: true
        },
        {
          labelWidth: '10px',
          label: "",
          type: 'slot',
          prop: 'delete',
          readonly: true
        }
      ],
      house: [],
      // 车产
      carDefinition: [
        {
          labelWidth: '50px',
          prop: 'brand',
          label: '品牌',
          readonly: true
        },
        {
          labelWidth: '50px',
          prop: 'modelNumber',
          label: '型号',
          readonly: true
        },
        {
          labelWidth: '90px',
          prop: 'year',
          label: '购车年份',
          type: 'datePicker',
          format: 'yyyy',
          itemType: 'year',
          readonly: true
        },
        {
          labelWidth: '120px',
          span: 6,
          prop: 'price',
          label: '预估现价(万)',
          readonly: true
        },
        {
          labelWidth: '10px',
          span: 3,
          label: "",
          type: 'slot',
          prop: 'delete',
          readonly: true
        }
      ],
      car: [],
      // 保单
      insuranceDefinition: [
        {
          prop: 'company',
          label: '保险公司',
          readonly: true
        },
        {
          prop: 'amount',
          label: '年缴金额',
          readonly: true
        },
        {
          prop: 'year',
          label: '购买年份',
          type: 'datePicker',
          format: 'yyyy',
          itemType: 'year',
          readonly: true
        },
        {
          labelWidth: '10px',
          label: "",
          type: 'slot',
          prop: 'delete'
        }
      ],
      insurance: [],
      // id
      id: undefined,
      // 客户需求table
      needTableData: [],
      allocationData: [],
      allocationLoading: true,
      allocationDisabled: false,
      snapshotData: [],
      snapshotLoading: true,
      snapshotDisabled: false,
      queryRequest: {id: undefined, custId: undefined}
    }
  },
  methods: {
    open(data) {
      this.data = data
      this.house = this.arrayJsonParse(this.data.houseJson)
      this.car = this.arrayJsonParse(this.data.carJson)
      this.insurance = this.arrayJsonParse(this.data.insuranceJson)
      this.dialogVisible = true
    },

    handleClose() {
      this.data = {}
      this.house = []
      this.car = []
      this.insurance = []
      this.dialogVisible = false
      this.$refs.form.clearValidate()
    },

    cancel() {
      this.dialogVisible = false
    },

    arrayJsonParse(jsonStr) {
      if (jsonStr === null || jsonStr === undefined || jsonStr === '') {
        return []
      }
      return JSON.parse(jsonStr)
    },

  }
}
</script>

<style scoped>

</style>
